﻿﻿﻿﻿﻿﻿﻿<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta id="i18n_pagename" content="index">
    <meta charset="utf-8" />
    <title>鑫大簇</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta content="Themesdesign" name="author" />
        <!-- favicon -->
        <!-- <link rel="shortcut icon" href="images/favicon.ico" /> -->
        <!-- Magnific -->
        <link href="../css/magnific-popup.css" rel="stylesheet" type="text/css" />
        <!-- 关键CSS内联 -->
        <style>
          /* 最小化关键CSS - 保持首屏基本样式 */
          body { 
            visibility: hidden; 
            opacity: 0; 
            transition: opacity 0.3s ease;
            font-family: sans-serif;
          }
          .navbar, .banner, .main-content { 
            visibility: visible; 
            opacity: 1; 
          }
          /* 基础布局样式 */
          .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
          }
        </style>
		
		<!-- 预加载主要CSS -->
		<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" media="print" onload="this.media='all'" />
		<link href="../css/materialdesignicons.min.css" rel="stylesheet" type="text/css" media="print" onload="this.media='all'" />
		<link href="../css/style.css" rel="stylesheet" type="text/css" media="print" onload="this.media='all'" />
		
		<!-- 加载完成后显示页面 -->
		<script>
		  window.addEventListener('load', function() {
			setTimeout(function() {
			  document.body.style.visibility = 'visible';
			  document.body.style.opacity = '1';
			}, 100);
		  });
		</script>
		
		<!-- Slider -->
		<link rel="stylesheet" href="../css/slick-theme.css" />
		<link rel="stylesheet" href="../css/slick.css" />
		<!-- <link href="../css/loading.css" rel="stylesheet"> -->
	
  </head>

  <body>
    <!-- 导航栏开始 -->
    <nav class="navbar navbar-expand-lg fixed-top navbar-custom navbar-light sticky" >
      <div class="container">
        <!-- <div class="translate_selectLanguage_tag">切换语言</div> -->
        <a class="navbar-brand" href="#"><img src="../images/image/logo.png" alt="LOGO" width="96"></a>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarCollapse"
          aria-controls="navbarCollapse"
          aria-expanded="false"
          aria-label="切换导航"
        >
          <span class="mdi mdi-menu"></span></button >
    
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav">
            <li class="nav-item ">
              <a class="nav-link"  href="../index.html">首页</a>
            </li>
            <li class="nav-item active">
              <a class="nav-link" href="#home" id="product">产品</a>
            </li>
            <li class="nav-item ">
              <a class="nav-link" href="../pageNews/index.html" >新闻</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="../pageWhyBuyus/index.html">为什么选择我们</a>
            </li>
            
            <li class="nav-item">
              <a class="nav-link" href="../pageContact/index.html">联系我们</a>
            </li>
			<li class="nav-item" style="margin-left: 425px;" >
			  <a class="nav-link" href="" id="language">
				  CN
				<img src="../assets/CodeBubbyAssets/37_124/1.svg" alt="下拉箭头" width="16">
			  </a>
			</li>
          </ul>
        </div>
      </div>
    </nav>
	
	<div class="language-selector-container" id="languageSelector">
	        <div class="language-selector">
	        	<div class="language-card active" data-code="chinese_simplified">
	        	    <span class="code">CN</span>
	        	    <span class="name">简体中文</span>
	        	</div>
	            <div class="language-card " data-code="english">
	                <span class="code" >EN</span>
	                <span class="name">English</span>
	            </div>
	        	<div class="language-card" data-code="russian">
	        	    <span class="code" >RU</span>
	        	    <span class="name">PyCCKиЙ</span>
	        	</div>
	        	<div class="language-card" data-code="french">
	        	    <span class="code">FR</span>
	        	    <span class="name">Frangais</span>
	        	</div>
	            <div class="language-card" data-code="spanish">
	                <span class="code">ES</span>
	                <span class="name">Español</span>
	            </div>
	            <div class="language-card" data-code="arabic">
	                <span class="code">AR</span>
	                <span class="name">بالعربية</span>
	            </div>
	            <img src="assets/CodeBubbyAssets/37_671/1.svg" class="close-icon" id="close-icon">
	        </div>
	</div>
	
	
	<!-- 页面横幅 -->
    <section class="banner">
        <div class="banner-bg"></div>
        <img class="banner-img" src="../assets/CodeBubbyAssets/28_1915/1.png" alt="产品中心横幅">
        <div class="banner-overlay"></div>
        <div class="banner-content">
            <h1 class="banner-title">产品中心</h1>
            <p class="banner-subtitle">Product Center</p>
        </div>
    </section>
	
	
	<!-- 主要内容区域 -->
    <main class="main-content" id="main-content">
	
	</main>
	
    <!-- 页脚开始 -->
    <footer class="footer py-5 bg-dark" >
      <div class="container">
        <div class="row" >
          <div class="col-lg-4 col-md-12" >
            <div class="col-md-6">
                <h2 class="text-white mb-4">联系我们</h2>
                <!-- 电话卡片 -->
                <div class="contact-card">
                    <div class="contact-icon">
                        <img src="../assets/CodeBubbyAssets/37_124/2.svg" alt="电话">
                    </div>
                    <div>
                        <div class="contact-title">联系电话</div>
                        <div class="contact-value">139 8210 9408（张总）</div>
                    </div>
                </div>
                
                <!-- 邮件卡片 -->
                <div class="contact-card">
                    <div class="contact-icon">
                        <img src="../assets/CodeBubbyAssets/37_124/3.svg" alt="邮件">
                    </div>
                    <div>
                        <div class="contact-title">邮件</div>
                        <div class="contact-value">123@abcde.com</div>
                    </div>
                </div>
                
                <!-- 地址卡片 -->
                <div class="contact-card">
                    <div class="contact-icon">
                        <img src="../assets/CodeBubbyAssets/37_124/4.svg" alt="地址">
                    </div>
                    <div>
                        <div class="contact-title">来访地址</div>
                        <div class="contact-value">中国安徽马鞍山</div>
                    </div>
                </div>
            </div>
          </div>

          <div class="col-lg-4 col-md-12" >
            <div class="col-md-6">
                <h2 class="text-white mb-4">快速入口</h2>
                <div class="quick-links">
                    <a href="../index.html" class="quick-link">首页</a>
                    <a href="../news-center.html" class="quick-link">新闻中心</a>
                    <a href="../pageWhyBuyus/index.html" class="quick-link">为什么选择我们</a>
                    
                    <a href="../pageContact/index.html" class="quick-link">联系我们</a>
                </div>
            </div>
          </div>

          <div class="col-lg-3 col-md-4 mt-4 pt-2 mt-lg-0 pt-lg-0" >
			<h3 class="text-white mb-4">营业时间</h3>
            <ul class="list-unstyled text-foot mt-4 mb-0">
              <li>周一至周五：9:00 至 17:00</li>
              <li class="mt-2">周六：10:00 至 15:00</li>
              <li class="mt-2">周日：休息（假日）</li>
            </ul>
          </div>
        </div>
      </div>
    </footer>
    <footer class="footer py-4 footer-bar bg-dark">
      <div class="container text-foot text-center">
        <div class="row align-items-center" >
		
			<div class="col-sm-15" >
			    <div class="text-sm-left">
			      <p class="mb-0">
			        鑫大簇数控机床有限公司2024版权所有 &nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;皖ICP备2025098111号<br> 本网站提供的所有产品信息仅供参考，具体以产品实物为准
			      </p>
			    </div>
			</div>
			
          <div class="col-sm-4 mt-4 mt-sm-0 pt-2 pt-sm-2" style="margin-left: 0;">
            <div class="text-sm-right">
              <a href="#" class="back-to-top rounded d-inline-block text-center" id="back-to-top" >
                <i class="mdi mdi-chevron-up d-block"> </i>
              </a>
            </div>
          </div>
        </div>
      </div>
    </footer>
    <!-- 页脚结束 -->
	
	<script src="../js/jquery-3.5.1.min.js"></script>
	<script src="../js/bootstrap.bundle.min.js"></script>
	<script src="../js/jquery.easing.min.js"></script>
	<script src="../js/scrollspy.min.js"></script>
	<script src="../js/menu.js"></script>
	
	<script src="../js/jquery.i18n.properties.js"></script>
	<script src="https://cdn.staticfile.net/translate.js/3.12.0/translate.js"></script>
	<!-- <script src="../js/loading.js"></script> -->

    <script>
		
		translate.service.use('client.edge');
		translate.language.setDefaultTo('chinese_simplified');
		translate.language.setLocal('chinese_simplified');
		translate.listener.start();
		translate.selectLanguageTag.show = false; // 隐藏默认的语言选择器
		    // translate.language.translateLocal = true;
		// 页面初始化
		document.addEventListener('DOMContentLoaded', function() {
			const code = localStorage.getItem('LanguageCode')
			console.log(code);
			if(code){
				var laguage = document.getElementById('language');
				laguage.textContent = code
			}
			
			// hideLoading();
		    // 在这里编写你的初始化代码
		});
		
		var total = 0;
		var page = 1;
		
		const baseUrl = 'https://xdcmt.com'
		function getTabTitle(){
				  $.ajax({
					 type:'get',
					 url: baseUrl + '/product/getListTitle',
					 dataType:'json',
					 contentType:'application/json',
					 success:function(res){
							if(res.code == 20000){
								let types = res.data
								let html=[]
								
								var productDom = document.getElementById('main-content')
								
								$.each(types,(index,item) =>{
									html.push(`
									<section class="product-category" >
										<div class="category-header">
											<div class="category-title-container">
												<h2 class="category-title">${item}</h2>
												<a href="./moreProduct/index.html?productTitle=${item}" class="view-more-btn">查看更多</a>
											</div>
											<div class="pagination">
											    <div class="pagination-btn prev">
											        <img src="../assets/CodeBubbyAssets/28_1915/8.svg" alt="上一页">
											    </div>
											    <div class="pagination-btn next">
											        <img src="../assets/CodeBubbyAssets/28_1915/9.svg" alt="下一页">
											    </div>
											</div>
										</div>
										<div class="product-grid" id="product-${index}"></div>
									</section>
									`)
									
									getProductList(item,index,1)
								})
								
								let htmlstr = html.join(',').replace(new RegExp(',','g'),'')
								productDom.insertAdjacentHTML('beforeend',htmlstr)
								
							}
							
							 
					 }
				  })
		}
		
		getTabTitle()
		
		function getProductList(item,index,page){
			$.ajax({
				type:'post',
				url:baseUrl + '/product/getlist',
				dataType:'json',
				contentType:'application/json',
				data:JSON.stringify({
					page:page,
					limit:4,
					title:item,
					name:''
				}),
				success:function(res){
					if(res.code == 20000){
						// console.log(res.data);
						let productList = res.data;
						
						total = res.total;
						
						let html = [];
						
						var dom = document.getElementById(`product-${index}`)
						console.log(dom,index);
						
							
						$.each(productList,(index,item) =>{
							html.push(`
							<div class="product-card">
								<div class="product-image-container">
								    <img src="${item.images}" alt="${item.name}" class="product-image">
								</div>
								<div class="product-info">
								    <h3 class="product-name">${item.name}</h3>
								    <div class="product-footer">
								        <span class="product-feature">${item.introduction || ''}</span>
								        <div class="learn-more blue" data-value="${item.name}" id="details-click">
								            了解更多
								            <img src="../assets/CodeBubbyAssets/28_1915/7.svg" alt="了解更多">
								        </div>
								    </div>
								</div>
							</div>
							`)
						})
						
						let htmlstr = html.join(',').replace(new RegExp(',','g'),'')
						dom.insertAdjacentHTML('beforeend',htmlstr)
						translate.execute();
						
						CardClick()
						
					}
				}
			})
		}
		
        document.addEventListener('DOMContentLoaded', function() {
            const prevButtons = document.querySelectorAll('.pagination-btn.prev');
            const nextButtons = document.querySelectorAll('.pagination-btn.next');
            
            prevButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 实现上一页逻辑
                   // if(page>1){
                   // 	page--
                   // 	getProductList(productTitle,page)
                   // }else{
                   // 	return;
                   // }
                });
            });
            
            nextButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // 实现下一页逻辑
                    console.log(total/4);
                    // if(page<total/4){
                    // 	page++
                    // 	getProductList(productTitle,page)
                    // }else{
                    // 	return;
                    // }
                });
            });
            
            
        });
		
		function CardClick(){
			// 了解更多按钮点击事件
			const learnMoreButtons = document.querySelectorAll('.learn-more');
			learnMoreButtons.forEach(button => {
			    button.addEventListener('click', function() {
					console.log(this.getAttribute('data-value'));
			        const productName = this.closest('.product-card').querySelector('.product-name').textContent;
			        // alert(`您点击了了解更多：${productName}`);
					if(this.getAttribute('data-value')){
						gourlDetail(this.getAttribute('data-value'))
					}
			    });
			});
		}
		
		function gourlDetail(item){
			 window.location.href = `details.html?title=${encodeURIComponent(item)}`;
		}
		
		
		// 语言切换
		document.getElementById('language').addEventListener('click', function(event) {
		    event.preventDefault();
		    // 可以添加其他代码来处理点击事件，但不进行跳转
				  
				  var langua = document.getElementById('languageSelector')
				  langua.style.display = 'flex'
				  
				  const languageTabs = document.querySelectorAll('.language-card');
				  languageTabs.forEach((tab,index) => {
					  
					  languageTabs.forEach(t => t.classList.remove('active'));
					  
					  if(tab.querySelector('.code').textContent == localStorage.getItem('LanguageCode')){
						  tab.classList.add('active');
					  }
					  
				  });
				  
				  window.scrollTo(0,0)  
		});
		
		document.getElementById('close-icon').addEventListener('click', function(event){
				  var langua = document.getElementById('languageSelector')
				  langua.style.display = 'none'
		})
		
		const languageTabs = document.querySelectorAll('.language-card');
		languageTabs.forEach((tab,index) => {
		    tab.addEventListener('click', function() {
		        // 移除所有active类
		        languageTabs.forEach(t => t.classList.remove('active'));
		        // 添加active类到当前选项卡
		        this.classList.add('active');
					  
					  const code = this.querySelector('.code').textContent;
					  console.log(code);
					  
					  activeLanguage(code)
					  
					  localStorage.setItem('LanguageDataCode',this.getAttribute('data-code'))
					  translate.changeLanguage(this.getAttribute('data-code'));
					  
					  var langua = document.getElementById('languageSelector')
					  langua.style.display = 'none'
					  
					  // const kabg = document.getElementById()
		                
		    });
		});
		
		function activeLanguage(code){
				  var laguage = document.getElementById('language');
				  laguage.textContent = code 
				  
				  localStorage.setItem('LanguageCode',code)
		}
	  
    </script>
	
	<style>
		/* 联系卡片 */
		.contact-card {
		    display: flex;
		    align-items: center;
			width: 375px;
		    gap: 10px;
		    margin-bottom: 30px;
		}
		.contact-icon {
		    width: 50px;
		    height: 50px;
		    background: #404040;
		    border-radius: 50%;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		}
		.contact-title {
		    color: #878788;
		    font-size: 18px;
		    margin-bottom: 5px;
		}
		.contact-value {
		    color: #CBCECE;
		    font-size: 18px;
			width: 200px;
		}
		/* 快速链接 */
		.quick-links {
		    display: flex;
		    flex-direction: column;
		    gap: 20px;
		}
		.quick-link {
		    color: #CBCECE;
		    font-size: 14px;
		    text-decoration: none;
		}
		/* 响应式设计 */
		@media (max-width: 768px) {
		    .contact-container {
		        flex-direction: column;
		    }
		    
		    .quick-links {
		        margin-top: 30px;
		    }
		}
		.language-switch {
		    display: flex;
		    align-items: center;
		    gap: 8px;
		}
		
		 /* 页面横幅 */
        .banner {
            position: relative;
            width: 100%;
            height: 600px;
            overflow: hidden;
        }
        
        .banner-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #D9D9D9;
        }
        
        .banner-img {
            position: absolute;
            width: 100%;
            height: 780px;
            top: -50px;
            object-fit: cover;
        }
        
        .banner-overlay {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: rgba(21.66, 26.82, 29.18, 0.80);
        }
        
        .banner-content {
            position: absolute;
            width: 562px;
            height: 124px;
            left: 50%;
            top: 238px;
            transform: translateX(-50%);
            text-align: center;
            color: white;
        }
        
        .banner-title {
            font-size: 60px;
            font-weight: 700;
            margin-bottom: 16px;
        }
        
        .banner-subtitle {
            font-size: 18px;
            font-weight: 400;
        }
		@media (max-width: 768px) {
            .banner-title {
                font-size: 40px;
            }
            
            .nav-container {
                width: 90%;
            }
            
            .nav-links {
                display: none;
            }
            
            .product-card {
                width: 100%;
                max-width: 412px;
            }
            
            .footer {
                height: auto;
                padding-bottom: 30px;
            }
            
            .footer-content {
                display: flex;
                flex-direction: column;
                gap: 40px;
            }
            
            .quick-links, .social-media {
                position: static;
            }
            
            .footer-bottom {
                flex-direction: column;
                gap: 20px;
            }
        }
		/* 响应式设计 */
        @media (max-width: 1920px) {
            .main-content {
                width: 88%;
            }
            
            .footer-content {
                width: 80%;
            }
            
            .quick-links {
                left: 40%;
            }
        }
        
        @media (max-width: 1200px) {
            .product-grid {
                justify-content: center;
            }
            
            .quick-links {
                left: 300px;
            }
        }
		
		.nav-link{
			white-space: nowrap;  /* 禁止换行 */
			overflow: hidden;     /* 隐藏溢出内容 */
			text-overflow: ellipsis; /* 显示省略号 */
		}
        
        @media (max-width: 768px) {
            .banner-title {
                font-size: 40px;
            }
            
            .nav-container {
                width: 90%;
            }
            
            .nav-links {
                display: none;
            }
            
            .product-card {
                width: 100%;
                max-width: 412px;
            }
            
            .footer {
                height: auto;
                padding-bottom: 30px;
            }
            
            .footer-content {
                display: flex;
                flex-direction: column;
                gap: 40px;
            }
            
            .quick-links, .social-media {
                position: static;
            }
            
            .footer-bottom {
                flex-direction: column;
                gap: 20px;
            }
        }
		
		/* 主要内容区域 */
        .main-content {
            width: 1696px;
            margin: 0 auto;
            padding-top: 20px;
        }
        
        /* 产品类别部分 */
        .product-category {
            width: 100%;
            margin-bottom: 90px;
        }
        
        .category-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }
        
        .category-title-container {
            display: flex;
            align-items: center;
        }
        
        .category-title {
            font-size: 24px;
            font-weight: 700;
            color: #333333;
            margin-right: 20px;
        }
        
        .view-more-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 81px;
            height: 36px;
            border: 1px solid #E3E2E5;
            border-radius: 31px;
            font-size: 14px;
            color: #333333;
            text-decoration: none;
        }
        
        .pagination {
            display: flex;
            gap: 16px;
        }
        
        .pagination-btn {
            width: 46px;
            height: 46px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 产品卡片网格 */
        .product-grid {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }
        
        .product-card {
            width: 412px;
            height: 394px;
            background-color: #ECEEF1;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
        }
        
        .product-image-container {
            width: 100%;
            height: 283px;
            background-color: #F3F4F6;
            position: relative;
            overflow: hidden;
        }
        
        .product-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .product-info {
            padding: 16px;
        }
        
        .product-name {
            font-size: 24px;
            color: #333333;
            margin-bottom: 18px;
			width: 400px;
			white-space: nowrap;  /* 禁止换行 */
			overflow: hidden;     /* 隐藏溢出内容 */
			text-overflow: ellipsis; /* 显示省略号 */
        }
        
        .product-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .product-feature {
            font-size: 16px;
            color: #8C91A0;
        }
        
        .learn-more {
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #58769D;
            cursor: pointer;
        }
        
        .learn-more.blue {
            color: #0D72F6;
        }
        
        .learn-more img {
            margin-left: 4px;
        }
		
		.language-selector-container {
		    display: none;
		    justify-content: center;
		    align-items: center;
		    width: 100%;
		    height: 100%;
		    background-color: #D9D9D9;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 999;
		}
		
		.language-selector {
		    position: relative;
		    width: 1122px;
		    height: 376px;
		    background: white;
		    border-radius: 8px;
		    padding: 20px;
		    box-sizing: border-box;
		}
		
		.language-card {
		    position: absolute;
		    width: 301px;
		    height: 50px;
		    background: #F6F7F8;
		    border-radius: 8px;
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    padding: 0 16px;
		    box-sizing: border-box;
		}
		
		.language-card.active {
		    background: #212121;
		}
		
		.language-card .code {
		    font-size: 14px;
		    font-family: "Microsoft YaHei", sans-serif;
		    font-weight: 400;
		    color: #333333;
		}
		
		.language-card.active .code {
		    color: white;
		}
		
		.language-card .name {
		    font-size: 14px;
		    font-family: "Microsoft YaHei", sans-serif;
		    font-weight: 400;
		    color: #333333;
		}
		
		.language-card.active .name {
		    color: white;
		}
		
		.close-icon {
		    position: absolute;
		    right: 20px;
		    top: 20px;
		    cursor: pointer;
		}
		
		/* 第一列 */
		.language-card:nth-child(1) {
		    left: 94px;
		    top: 91px;
		}
		
		.language-card:nth-child(2) {
		    left: 94px;
		    top: 153px;
		}
		
		.language-card:nth-child(3) {
		    left: 94px;
		    top: 215px;
		}
		
		.language-card:nth-child(4) {
		    left: 94px;
		    top: 277px;
		}
		
		/* 第二列 */
		.language-card:nth-child(5) {
		    left: 411px;
		    top: 91px;
		}
		
		.language-card:nth-child(6) {
		    left: 411px;
		    top: 153px;
		}
		
		.language-card:nth-child(7) {
		    left: 411px;
		    top: 215px;
		}
		
		/* 第三列 */
		.language-card:nth-child(8) {
		    left: 728px;
		    top: 91px;
		}
		
		.language-card:nth-child(9) {
		    left: 728px;
		    top: 153px;
		}
		
		.language-card:nth-child(10) {
		    left: 728px;
		    top: 215px;
		}
		
		.nav-link{
			white-space: nowrap;  /* 禁止换行 */
			overflow: hidden;     /* 隐藏溢出内容 */
			text-overflow: ellipsis; /* 显示省略号 */
		}
		
		
	</style>
	
  </body>
</html>